<template>
  <div>
    <!-- 技术解释区域 -->
    <div style="background-color: #e3f2fd; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #2196F3;">
      <h3 style="color: #1976D2; margin-top: 0;">🎭 技术解释：基础过渡动画（淡入淡出）</h3>
      <p><strong>Transition组件：</strong>Vue提供的 <code>&lt;Transition&gt;</code> 组件用于为单个元素或组件的进入/离开添加过渡效果。</p>
      <p><strong>过渡类名：</strong>Vue会自动添加6个CSS类名：<code>v-enter-from</code>、<code>v-enter-active</code>、<code>v-enter-to</code>、<code>v-leave-from</code>、<code>v-leave-active</code>、<code>v-leave-to</code>。</p>
      <p><strong>自定义名称：</strong>通过 <code>name</code> 属性可以自定义过渡类名前缀，如 <code>name="fade"</code> 会生成 <code>fade-enter-from</code> 等类名。</p>
      <p><strong>过渡时机：</strong>当元素的 <code>v-if</code>、<code>v-show</code> 或动态组件切换时触发过渡效果。</p>
    </div>

    <!-- 交互演示区域 -->
    <div style="background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
      <h3>基础过渡动画演示</h3>
      
      <!-- 控制面板 -->
      <div style="margin-bottom: 20px; padding: 15px; background-color: white; border-radius: 4px; border: 1px solid #ddd;">
        <div style="margin-bottom: 15px;">
          <button @click="toggleShow" style="padding: 10px 20px; background-color: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
            {{ show ? '隐藏元素' : '显示元素' }}
          </button>
          <button @click="toggleMode" style="padding: 10px 20px; background-color: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer;">
            切换模式: {{ mode }}
          </button>
        </div>
        
        <div style="margin-bottom: 10px;">
          <label style="display: inline-block; width: 100px;">过渡时长：</label>
          <input v-model.number="duration" type="range" min="200" max="2000" step="100" style="margin-right: 10px;">
          <span>{{ duration }}ms</span>
        </div>
        
        <div>
          <label style="display: inline-block; width: 100px;">缓动函数：</label>
          <select v-model="easing" style="padding: 5px; border: 1px solid #ddd; border-radius: 4px;">
            <option value="ease">ease</option>
            <option value="ease-in">ease-in</option>
            <option value="ease-out">ease-out</option>
            <option value="ease-in-out">ease-in-out</option>
            <option value="linear">linear</option>
          </select>
        </div>
      </div>

      <!-- 过渡效果展示 -->
      <div style="border: 1px solid #ddd; padding: 20px; border-radius: 4px; background-color: white; min-height: 200px; display: flex; align-items: center; justify-content: center;">
        <Transition :name="transitionName" :duration="duration">
          <div v-if="show" :class="['demo-box', mode]" :style="{ transitionTimingFunction: easing }">
            <h4 style="margin: 0 0 10px 0; color: white;">{{ mode === 'v-if' ? 'v-if 控制' : 'v-show 控制' }}</h4>
            <p style="margin: 0; color: white;">这是一个过渡动画演示框</p>
            <p style="margin: 5px 0 0 0; font-size: 12px; color: rgba(255,255,255,0.8);">时长: {{ duration }}ms | 缓动: {{ easing }}</p>
          </div>
        </Transition>
        
        <Transition name="fade" :duration="duration">
          <div v-show="show && mode === 'v-show'" class="demo-box v-show" :style="{ transitionTimingFunction: easing }">
            <h4 style="margin: 0 0 10px 0; color: white;">v-show 控制</h4>
            <p style="margin: 0; color: white;">这是一个过渡动画演示框</p>
            <p style="margin: 5px 0 0 0; font-size: 12px; color: rgba(255,255,255,0.8);">时长: {{ duration }}ms | 缓动: {{ easing }}</p>
          </div>
        </Transition>
      </div>

      <!-- 状态显示 -->
      <div style="margin-top: 15px; padding: 10px; background-color: #e8f5e8; border-radius: 4px;">
        <strong>当前状态：</strong>
        <p>显示状态: {{ show ? '显示' : '隐藏' }} | 控制方式: {{ mode }} | 过渡名称: {{ transitionName }}</p>
        <p>过渡时长: {{ duration }}ms | 缓动函数: {{ easing }}</p>
      </div>
    </div>

    <!-- 代码示例 -->
    <div style="background-color: #f8f8f8; padding: 15px; border-radius: 4px; margin-top: 20px;">
      <h4>代码示例：</h4>
      <pre style="background-color: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 4px; overflow-x: auto;"><code>&lt;template&gt;
  &lt;Transition name="fade"&gt;
    &lt;div v-if="show" class="demo-box"&gt;
      内容
    &lt;/div&gt;
  &lt;/Transition&gt;
&lt;/template&gt;

&lt;style&gt;
.fade-enter-active, .fade-leave-active {
  transition: opacity {{ duration }}ms {{ easing }};
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
&lt;/style&gt;</code></pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GuoDu01',
  data() {
    return {
      show: true,
      mode: 'v-if',
      duration: 500,
      easing: 'ease-in-out'
    };
  },
  computed: {
    transitionName() {
      return this.mode === 'v-if' ? 'fade' : '';
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
    toggleMode() {
      this.mode = this.mode === 'v-if' ? 'v-show' : 'v-if';
    }
  }
};
</script>

<style scoped>
.demo-box {
  width: 200px;
  height: 120px;
  background: linear-gradient(45deg, #2196F3, #21CBF3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-align: center;
}

.demo-box.v-show {
  background: linear-gradient(45deg, #FF9800, #FFC107);
}

/* 淡入淡出过渡效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 500ms ease-in-out;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 动态过渡时长 */
.fade-enter-active {
  transition-duration: v-bind(duration + 'ms');
  transition-timing-function: v-bind(easing);
}
.fade-leave-active {
  transition-duration: v-bind(duration + 'ms');
  transition-timing-function: v-bind(easing);
}
</style>